<template>
  <div>
    <el-popover
      v-model="showTable"
      placement="bottom-start"
      trigger="focus">
      <select-table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt" @db-row-click="dbRowClick" :style="'width:' + width">
      </select-table-ext>
      <el-input v-model="currentValue" placeholder="" slot="reference" clearable readonly></el-input>
    </el-popover>
  </div>
</template>
<script>
  import SelectTableExt from '../table-ext/table-ext';
  import TableIcon from '../table-ext/table-icon';
  export default {
    data() {
      return {
        currentValue:'',
        showTable: false,
        config:{ // 页面共通配置
          isPage: true, //是否分页
          isNo:true,
          prefixCls: 'select',
          tableHeight: '453',
          crudMapping:{
            query:{
              url: this.lib.config.host.system + '/system/orgmgt/organization/query'
            }
          }
        },
        searchForm:[{ // 查询表单配置
          label: '供应商编码：', //显示名
          key: 'vendorCode', //数据字段
          type: 'input' //类型
        },{
          label: 'ERP编号：',
          key: 'vendorErpCode',
          type: 'input'
        },{
          label: '供应商简称：',
          key: 'vendorName',
          type: 'input'
        },{
          label: '供应商等级：',
          key: 'vendorLevel',
          type: 'select',
          isDisabled:false, // 是否可选择
          dict: [{
            value: '-1',
            label: ' 淘汰'
          },{
            value: '1',
            label: '注册'
          },{
            value: '2',
            label: ' 潜在'
          },{
            value: '3',
            label: '正式'
          }]
        }],
        columns:[{
          label: '供应商编码',
          key: 'vendorCode',
          order: true,
          width:'120px',
          align:'center'
        },{
          label: '供应商ERP编号',
          key: 'vendorErpCode',
          width:'140px',
          align:'center'
        },{
          label: '供应商简称',
          key: 'vendorName',
          align: 'center',
          width:'320px',
        },{
          label: '供应商等级',
          key: 'vendorLevel',
          align:'center',
          width:'120px',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            if(params.row.vendorLevel == -1){
              return createElement('div','淘汰');
            } else if(params.row.vendorLevel == 1){
              return createElement('div','注册');
            } else if(params.row.vendorLevel == 2){
              return createElement('div','潜在');
            } else {
              return createElement('div','正式');
            }
          }
        }]}
    },
    props:{
      value: {
        type: String
      },
      width: {
        type: String,
        default: '800px'
      },
      vendorLevel:{
      }
    },
    components:{
      SelectTableExt,TableIcon
    },
    created(){
      if(this.vendorLevel){
        this.searchForm[3].isDisabled = true;
        this.config.crudMapping.query.data = {'vendorLevel': this.vendorLevel};
      }
    },
    methods: {
      dbRowClick(row){
        this.currentValue = row.vendorName;
        this.$emit('input', row.vendorName);
        this.$emit('on-selection-data', JSON.parse(JSON.stringify(row)));
        this.showTable = false;
      }
    },
    watch:{
      value(val){
        this.currentValue = val;
      },
      vendorLevel(val){
        this.searchForm[3].isDisabled = true;
        this.config.crudMapping.query.data = {'vendorLevel': val};
        this.$refs['tableExt'].searchInit();
        this.$refs['tableExt'].search();
      },
      currentValue(val){
        if (val === '') {
          this.$emit('input', '');
          this.$emit('on-selection-data', {});
        }
      }
    }
  };
</script>
